<template>
	<view class="article" v-if="!firstLoading">
		<my-header :avatar="editor.avatar"
				:nickname="editor.nickname"
				:id="editor.id"
		></my-header>
		<view class="rotation">
			<u-swiper
					:list="dealRotations"
					indicator
					autoplay
					indicatorMode="line"
					circular
					:interval="5000"
					height="500"
					imgMode="aspectFit"
					@click="previewImage"
			></u-swiper>
		</view>
		<!-- 文字内容区 -->
		<view class="textContent">
			<u-parse :content="content"></u-parse>
			<view class="tags">
				<text class="tag" v-for="(item, index) in tags" :key="index">
					#{{item.name}}
				</text>
			</view>
			<view class="time">
				{{createTime}}
			</view>
			<u-divider></u-divider>
		</view>
		<!-- 评论 -->
		
		<view class="comment" v-if="comment.length != 0">
			<view class="total p-1">共{{commentTotal}}条评论</view>
			<comment v-for="(item, index) in comment" :key="index"				
			 :avatar="item.commentUser.avatar"
			 :username="item.commentUser.nickname"
			 :text="item.content"
			 :time="item.createTime"
			 :userId="item.userId"
			 @click="commentObj = item;inputFoucs = true;"
			>
				<comment v-for="(reply, index2) in item.replies" :key="index2"				
						 :avatar="reply.commentUserInfo.avatar"
						 :username="reply.commentUserInfo.nickname"
						 :text="reply.content"
						 :time="reply.createTime"
						 :reply="reply.replyUserInfo.nickname || ''"
						 :userId="reply.userId"
						 @click="commentObj = reply;inputFoucs = true;"
				>
				</comment>
				<!-- 当该条评论的回复量大于现有的回复数时显示获取更多回复 -->
				<u-loadmore v-if="item.replyNum > item.replies.length"
							:status="item.loadStatus"
							loadmoreText="点击加载更多"
							:iconSize="25"
							@loadmore="getMoreReply(index, item.id)"
							:fontSize="25"
				/>
			</comment>
			<view class="load py-2">
				<u-loadmore :status="commentStatus" 
							loadmoreText="点击加载更多..."
							:iconSize="25"
							:fontSize="25"
							@loadmore="getArticleComment()"
				/>
			</view>
		</view>
		<view class="commentNone text-center" v-else>
			暂无评论~快来占座吧！~
		</view>
		
		<!-- 底部输入区 -->
		<bottom-area :isFoucs="inputFoucs"
			@foucs="dealCommentType"
			@submit="submit"
			ref="buttomArea"
			:commentNum="commentTotal"
			:articleId="articleId"
			:isLike.sync="other.isLike"
			:likeNum.sync="other.likeNum"
			:isCollect.sync="other.isCollect"
			:collectNum.sync="other.collectNum"
		></bottom-area>
	</view>
	<loading-page v-else></loading-page>
</template>

<script>
	import myHeader from "./cpn/myHeader.vue";
	import comment from "./cpn/comment.vue";
	import bottomArea from "./cpn/bottomArea.vue";
	
	import {
		mergeBackPath
	} from "@/utils/file.js"
	import {
		getArticleDetails,
		getArticleComment,
		commentArticle,
		replyComment,
		getMoreReply
	} from "@/api/article.js";
	
	export default {
		components: {
			myHeader,
			comment,
			bottomArea
		},
		data() {
			return {
				articleId: -1,
				firstLoading: true,
				editor: {
					avatar: '',
					id: null,
					level: null,
					nickname: ""
				},
				content: '',
				createTime: "",
				tags: [],
				rotations: [],
				pageInfo: {
					page: 1,
					pageSize: 5
				},
				commentObj: null,
				commentStatus: "loadmore",
				commentTotal: 0,
				inputFoucs: false,
				comment: [],
				other: {
					likeNum: 0,
					isLike: false,
					collectNum: 0,
					isCollect: false
				}
			};
		},
		async onLoad(options) {
			if(options.id) this.articleId = options.id;
			else this.$go("/pages/index/index");
			try{
				await this.getArticleDetails();
				await this.getArticleComment();
			} catch(err) {
				
			}
			this.firstLoading = false;
		},
		computed: {
			dealRotations() {
				return this.rotations.map(item => mergeBackPath(item));
			}
		},
		methods: {
			// 获取文章详情
			getArticleDetails() {
				return new Promise((resolve, reject) => {
					getArticleDetails(this.articleId).then(res => {
						this.editor = res.content.articleEditor;
						this.rotations = res.content.articleContent.pictures_of_Arr;
						this.content = res.content.articleContent.content;
						this.tags = res.content.categories;
						this.createTime = res.content.createTime;
						
						this.other.likeNum = res.other.likeNum;
						this.other.isLike = res.other.isLike;
						this.other.collectNum = res.other.collectNum;
						
						this.other.isCollect = res.other.isCollect;
						
						resolve();
					}).catch(err => this.$msg(err.message));
				})
			},
			// 预览图片
			previewImage(index) {
				uni.previewImage({
					urls: this.dealRotations,
					current: index,
					fail: (err) => {
						console.log(err)
					}
				})
			},
			// 获取文章评论
			getArticleComment() {
				// 当当前正在加载中获没有更多了，则直接返回
				if(["loading", "nomore"].indexOf(this.commentStatus) != -1) return;
				// 让当前处于加载状态
				this.commentStatus = "loading";
				return new Promise((resolve, reject) => {
					getArticleComment(this.articleId, this.pageInfo).then(res => {
						let arr = res.comment.map(item => {
							return {
								...item,
								pageInfo: {
									page: 2,
									pageSize: 3
								},
								loadStatus: 'loadmore'
							}
						});
						this.comment = [...this.comment, ...arr];
						this.commentTotal = res.total;
						if(res.total <= this.comment.length) this.commentStatus = "nomore";
						else {
							this.commentStatus = "loadmore";
							this.pageInfo.page++;
						}
						resolve();
					}).catch(err => this.$msg(err.message));
				})
			},
			// 确认当前用户时自己评论还是回复评论
			dealCommentType(value) {
				this.inputFoucs = value;
				this.commentObj = null;
			},
			// 提交评论或者回复
			submit(value) {
				if(value == "") return this.$msg("评论/回复内容不能为空！");
				let obj = {};
				// 当当前评论对象，则说明当前用户时自发的评论
				if(!this.commentObj) {
					commentArticle({
						articleId: this.articleId,
						content: value
					}).then(res => {
						// 关闭输入框
						this.inputFoucs = false;
						// 清空输入框内容
						this.$refs.buttomArea.clear();
						// 因为评论内容要审核，暂不设置回显
						this.$msg("评论成功！");
						
						// 为了发布体验，回显
						// this.comment.unshift()
						
					}).catch(err => this.$msg(err.message));
				}else {
					let obj = {
						articleId: this.articleId,
						replyId: this.commentObj.userId,
						content: value
					};
					if(this.commentObj.replies) obj.floorId = this.commentObj.id;
					else obj.floorId = this.commentObj.floorId;
					
					replyComment(obj).then(res => {
						// 关闭输入框
						this.inputFoucs = false;
						// 清空输入框内容
						this.$refs.buttomArea.clear();
						// 因为回复内容要审核，暂不设置回显
						this.$msg("回复成功！");
					}).catch(err => this.$msg(err.message));
				}
			},
			// 获取更多回复
			getMoreReply(index, floorId) {
				// 当当前正在加载中获没有更多了，则直接返回
				if(["loading", "nomore"].indexOf(this.comment[index].loadStatus) != -1) return;
				// 当当前回复数全部加载完毕时就直接返回就可以了
				if(this.comment[index].replyNum <= this.comment[index].replies.length) return;
				this.comment[index].loadStatus = "loading";
				// 加大计量
				// this.comment[index].pageInfo.pageSize = 20;
				getMoreReply(this.articleId, floorId, this.comment[index].pageInfo).then(res => {
					this.comment[index].replies = [...this.comment[index].replies, ...res.replies];
					if(res.total >= this.comment[index].replies.length) {
						this.comment[index].pageInfo.page++;
						this.comment[index].loadStatus = "loadmore";
					}else this.comment[index].loadStatus = "nomore";
					
				}).catch(err => this.$msg(err.message));
			}
		},
		// 触底时触发
		onReachBottom() {
			this.getArticleComment();
		}
	}
</script>

<style lang="scss" scoped>
.article{
	.rotation{
		width: 100vw;
		height: 500rpx;
		overflow: hidden;
		/* #ifndef APP-PLUS */
		margin-top: 10rpx;
		/* #endif */
	}
	.textContent{
		padding: 10rpx;
		.tags{
			margin-top: 10rpx;
			.tag{
				&:first-of-type{
					margin-left: 0rpx;
				}
				margin-left: 10rpx;
				color: #55aaff;
				font-size: 26rpx;
			}
		}
		.time{
			margin-top: 10rpx;
			font-size: 26rpx;
			color: #888888;
		}
	}
	.comment{
		margin-top: -30rpx;
		.total{
			font-size: 25rpx;
			color: #4b4b4b;
		}
		.moreReply{
			font-size: 25rpx;
			color: #5555ff;
		}
	}
	.commentNone{
		font-size: 30rpx;
		color: #b7b7b7;
	}
}
</style>
